<script setup>
import { ref, defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDisHistory, getClassHistory } from '@/services/img'
import dayjs from 'dayjs'

const props = defineProps({
  type: {
    type: String,
  },
})
const list = ref([])

onLoad(async () => {
  let res
  if (props.type === 'dis') {
    res = await getDisHistory()
  } else {
    res = await getClassHistory()
  }
  list.value = res.data
})
const goToResult = (id) => {
  if (list.value[0].names) {
    uni.navigateTo({
      url: `/pages/result/result?clsId=${id}`,
    })
  } else {
    uni.navigateTo({
      url: `/pages/result/result?disId=${id}`,
    })
  }
}
</script>

<template>
  <view class="item" v-for="item in list" :key="item.id" @click="goToResult(+item.idH)">
    <image :src="item.url" mode="scaleToFill" />
    <span class="text" v-if="item.classifications">{{ item.classifications.join(',') }}</span>
    <span class="text" v-else>{{ item.names.join(',') }}</span>
    <span class="date">{{ dayjs(item.createDateTime).format('YYYY-MM-DD HH:mm') }}</span>
  </view>
</template>
<style>
page {
  background-color: #327349;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  width: 90%;
  margin-top: 5%;
  height: 100rpx;
  background-color: white;
  border-radius: 20rpx;
  display: flex;
  position: relative;
  box-shadow: 0px 0px 10px black;
}
.item > image {
  height: 100rpx;
  width: 100rpx;
  margin-left: 20rpx;
  border-radius: 20rpx;
}
.date {
  font-size: 20rpx;
  line-height: 100rpx;
  margin-left: 40rpx;
  position: absolute;
  right: 20rpx;
}
.text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 45%;
  margin-left: 20rpx;
  font-size: 30rpx;
  font-weight: bolder;
  line-height: 100rpx;
}
</style>
